'use client'

import * as React from 'react'
import { NextUIProvider } from '@nextui-org/system'
import { useRouter } from 'next/navigation'
import { ThemeProvider as NextThemesProvider } from 'next-themes'
import { RootContext } from './RootContext'
import { ClerkProvider } from '@clerk/nextjs'
import { env } from 'process'
import { ConfigProvider } from 'antd'
import { AntdRegistry } from '@ant-design/nextjs-registry'
import { zhCN } from '@clerk/localizations'

interface ValueObject {
  [themeName: string]: string
}

export interface ThemeProviderProps {
  /** List of all available theme names */
  themes?: string[] | undefined
  /** Forced theme name for the current page */
  forcedTheme?: string | undefined
  /** Whether to switch between dark and light themes based on prefers-color-scheme */
  enableSystem?: boolean | undefined
  /** Disable all CSS transitions when switching themes */
  disableTransitionOnChange?: boolean | undefined
  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
  enableColorScheme?: boolean | undefined
  /** Key used to store theme setting in localStorage */
  storageKey?: string | undefined
  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
  defaultTheme?: string | undefined
  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
  attribute?: string | 'class' | undefined
  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
  value?: ValueObject | undefined
  /** Nonce string to pass to the inline script for CSP headers */
  nonce?: string | undefined
}

export interface ProvidersProps {
  children: React.ReactNode
  themeProps?: ThemeProviderProps
}

const appearance = {
  variables: { colorPrimary: '#000000' },
  elements: {
    formButtonPrimary:
      'bg-black border border-black border-solid hover:bg-white hover:text-black',
    socialButtonsBlockButton:
      'bg-white border-gray-200 hover:bg-transparent hover:border-black text-gray-600 hover:text-black',
    socialButtonsBlockButtonText: 'font-semibold',
    formButtonReset:
      'bg-white border border-solid border-gray-200 hover:bg-transparent hover:border-black text-gray-500 hover:text-black',
    membersPageInviteButton:
      'bg-black border border-black border-solid hover:bg-white hover:text-black',
    card: 'bg-[#fafafa]'
  }
}

export function Providers({ children, themeProps }: ProvidersProps) {
  const router = useRouter()

  return (
    <NextUIProvider navigate={router.push}>
      <NextThemesProvider {...themeProps}>
        <ClerkProvider
          localization={zhCN}
          appearance={appearance}
          publishableKey={env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
        >
          <RootContext.Provider>{children}</RootContext.Provider>
        </ClerkProvider>
      </NextThemesProvider>
    </NextUIProvider>
  )
}
